<template>
  <!-- 页面容器 -->
  <div class="header_information page-container">
    <!-- 头部区域，包含标题和装饰线条 -->
    <el-row class="header_name">
      <el-col :span="24" class="header_text">
        <h1>赛事报名管理</h1>
      </el-col>
      <el-col :span="24">
        <div class="header_line"></div>
      </el-col>
    </el-row>

    <!-- 按钮区域，包含已参与赛事的按钮和其他筛选工具 -->
    <el-row class="el_row_btn">
      <el-col :span="24" class="content">
        <div class="content_top_btn">
          <div>
            <el-button
              size="large"
              :icon="ScaleToOriginal"
              @click="handleOpenEventedModal"
              >已参与的赛事</el-button
            >
          </div>
          <div>
            <el-space>
              <GroupsSelect v-model="query_data.groupId" />
              <ModeSelect v-model="query_data.competitionType" />
              <ProvinceSelect
                :isW="true"
                v-model:economize="query_data.economize"
                :showMarket="false"
                :addChina="true"
              />
              <el-input
                class="top_search_inp"
                placeholder="搜素：比赛名称"
                v-model="query_data.eventName"
              />
              <el-button
                size="large"
                :icon="Search"
                circle
                @click="() => handleLoad(true)"
                :loading="loading"
              />
            </el-space>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 赛事内容展示区域 -->
    <el-row>
      <el-col :span="24" v-loading="loading">
        <div class="col_sp24">
          <el-card class="box_card" v-for="item in data" :key="item.eventId">
            <template #header>
              <div class="card_header">
                <span class="card_text"
                  >{{ item.name }}({{ item.groupDescribe }}){{
                    item.economizeName ? "(" + item.economizeName + ")" : ""
                  }}报名入口</span
                >
              </div>
            </template>
            <div class="text item">
              <div class="competition_content">
                <div class="content">
                  <el-icon>
                    <Pointer />
                  </el-icon>
                  <span> 比赛组别： </span>
                </div>
                <span class="con_group">{{ item.groupDescribe }}</span>
              </div>
              <div class="competition_content">
                <div class="content">
                  <el-icon>
                    <MagicStick />
                  </el-icon>
                  <span> 参赛方式： </span>
                </div>
                <span class="con_group" v-if="item.competitionType == 0"
                  >线下</span
                >
                <span class="con_group" v-else-if="item.competitionType == 1"
                  >线上</span
                >
                <span class="con_group" v-else-if="item.competitionType == 2"
                  >线上+线下</span
                >
              </div>
              <div class="competition_content">
                <div class="content">
                  <el-icon>
                    <Location />
                  </el-icon>
                  <span> 比赛区域：</span>
                </div>

                <span class="con_group">{{ item.economizeName }}</span>
              </div>
              <div class="competition_content">
                <div class="content">
                  <el-icon>
                    <Tickets />
                  </el-icon>
                  <span> 赛事说明：</span>
                </div>
                <span class="con_group"
                  >{{ item.eventDescribe }}({{ item.groupDescribe }}){{
                    item.economizeName ? "(" + item.economizeName + ")" : ""
                  }}报名入口</span
                >
              </div>
            </div>
            <div style="text-align: right">
              <el-button
                type="primary"
                size="large"
                @click="handleToDetails(item)"
                v-if="item.state == 1"
                >立即报名</el-button
              >
              <el-button type="info" size="large" v-if="item.state == 2"
                >报名已截止</el-button
              >
              <el-button type="info" size="large" v-if="item.state == 3"
                >人数已满</el-button
              >
            </div>
          </el-card>
        </div>
      </el-col>
      <div class="nodata" v-if="total == 0">
        <el-empty></el-empty>
      </div>
    </el-row>
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="total"
        @current-change="handlePage"
      />
    </div>
    <!-- 已参与赛事的弹窗 -->
    <el-dialog v-model="evented.show" title="已参与赛项">
      <el-table
        :data="data2"
        empty-text="未查询到已参与赛项"
        v-loading="loading2"
      >
        <el-table-column prop="eventId" label="赛事编号" />
        <el-table-column prop="name" label="赛事名称" />
        <el-table-column prop="playingTime" label="比赛时间" width="120" />
        <el-table-column prop="district" label="比赛地点" />
        <el-table-column prop="participantsNumber" label="参赛人数" />
        <el-table-column prop="waitingListCount" label="待填写ID码人数" />
        <el-table-column prop="date" label="操作">
          <template #default="scope">
            <el-button @click="handleToDetails(scope.row)">报名详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="total2"
          @current-change="handlePage2"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script  setup>
// 导入Element Plus的图标，用于界面中的搜索和缩放操作
import { Search, ScaleToOriginal } from "@element-plus/icons-vue";
// 导入Vue的生命周期钩子onMounted和响应式数据引用ref
import { onMounted, ref } from "vue";
// 导入自定义的省份选择组件
import ProvinceSelect from "@/components/province-select/index.vue";
// 导入赛事管理相关的API接口
import {
  GetEventsApi,
  GetAlreadyEventsListPageApi,
} from "@/api/manage/competition";
// 导入自定义的分页钩子usePage
import { usePage } from "@/hooks/usePage";
// 导入自定义的分组选择组件
import GroupsSelect from "@/components/groups-select/index.vue";
// 导入自定义的模式选择组件
import ModeSelect from "@/components/mode-select/index.vue";
// 导入Vue Router的路由钩子
import { useRouter } from "vue-router";
// 导入用户状态管理
import { useUserStore } from "@/store/user";
// 导入Element Plus的消息提示组件
import { ElMessage } from "element-plus";

// 使用用户状态管理
const userStore = useUserStore();
// 使用路由钩子
const router = useRouter();

// 使用分页钩子，并定义分页相关的响应式数据和方法
const { total, data, loading, query_data, handleLoad, handlePage } = usePage({
  api_fn: GetEventsApi,
  q_data: {
    groupId: null,
    competitionType: 0,
    eventName: "",
    economize: "",
    market: "",
  },
});

/**
 * 已参与赛事的弹窗状态
 */
const evented = ref({
  show: false,
});
/**
 * 打开已参赛项目弹窗的方法
 */
const handleOpenEventedModal = () => {
  evented.value.show = true;
  handleLoad2(true);
};
/**
 * 前往赛项详情页的方法
 */
const handleToDetails = (row) => {
  if (userStore.info_data.auditStatus != 1) {
    ElMessage.error("审核中或审核未通过，暂不支持使用功能");
    return;
  }
  // 导航到赛项详情页，并传递赛事ID作为参数
  router.push({
    name: "manage-registration-details",
    params: {
      eventId: row.eventId,
    },
  });
};

// ----------- 已报名的赛事 -----------
// 定义已报名赛事的分页状态和方法
const {
  total: total2,
  data: data2,
  loading: loading2,
  handleLoad: handleLoad2,
  handlePage: handlePage2,
} = usePage({
  api_fn: GetAlreadyEventsListPageApi,
});
// 组件挂载时，加载赛事数据
onMounted(() => {
  handleLoad(true);
});
</script>

<style lang="scss" scoped>
.header_information {
  padding: 20px;
  .header_name {
    margin-left: 10px;
    margin-right: 10px;
    .header_text {
      margin-left: -10px;
      margin-right: -10px;
    }
    h1 {
      font-size: 28px;
    }
    // 线
    .header_line {
      display: block;
      height: 1px;
      width: 100%;
      margin: 24px 0 20px 0;
      background-color: #8473f717;
    }
  }
  //   内容
  :deep(.el-card__header) {
    background: #dcdfe633;
    height: 50px;
    font-size: 16px;
    font-weight: 700;
    line-height: 50px;
    padding-left: 20px;
    padding-right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px 10px 0 0;
  }
  .col_sp24 {
    flex-wrap: wrap;
    display: flex;
    min-height: 120px;
    .box_card {
      width: 450px;
      height: 280px;
      margin-bottom: 20px;
      margin-right: 20px;
      border: 1px solid #ebeef5;
      border-radius: 10px;
      .card_header {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        width: 310px;
        height: 50px;

        .card_text {
          font-size: 16px;
          font-weight: 700;
          line-height: 0 !important;
        }
      }
    }
  }
  .text {
    height: 160px;
    .competition_content {
      display: flex;
      margin-bottom: 10px;
      .content {
        display: flex;
        align-items: center;
        color: #cf9236;
        span {
          font-size: 14px !important;
          margin-left: 3px;
        }
      }
      .con_group {
        color: #909399;
        font-size: 14px !important;
      }
    }
  }

  .el_row_btn {
    margin-bottom: 20px;
    .content {
      .content_top_btn {
        display: flex;
        justify-content: space-between;
        .top_search_inp {
          width: 150px;
          height: 40px;
          margin-right: 5px;
        }
        .top_search_btn {
          width: 110px;
          margin-right: 5px;
        }
        .top_search_btn1 {
          width: 90px;
          margin-right: 5px;
        }
      }
    }
  }
}
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}
.nodata {
  display: flex;
  justify-content: center;
  width: 100%;
}
</style>